<template>
    <el-aside width="200px"  style="background-color: #263238;display: block;">
      <div class="info">
          <a href="#" class="avatar-box" >
            <img :src="info.avatar"/>
          </a>
      <p>你好！{{info.username}}, 欢迎回来</p>
      </div>
      <el-menu  background-color="#263238" text-color="#fff" active-text-color="#fff"  router>
        <el-menu-item index="1">
          <el-icon><House /></el-icon>
              <span slot="title">导控制台</span>
         </el-menu-item>
         <el-sub-menu index="1">
          <template #title>
            <el-icon><UserFilled /></el-icon>
            <span>用户管理</span>
          </template>
          <el-menu-item index="/student"><el-icon><User /></el-icon>学生管理</el-menu-item>
          <el-menu-item index="/teacher"><el-icon><User /></el-icon>讲师管理</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>
            <el-icon><School /></el-icon>
            <span>班级管理</span>
          </template>
          <el-menu-item index="2-1">班级列表</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>
            <el-icon><Money /></el-icon>
            <span>课程管理</span>
          </template>
          <el-menu-item index="/course"><el-icon><platform /></el-icon>课程列表</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="4">
          <template #title>
            <el-icon><Tickets /></el-icon>
            <span>评测管理</span>
          </template>
          <el-menu-item index="/examlabel">评测标签</el-menu-item>
          <el-menu-item index="/examlist">评测列表</el-menu-item>
        </el-sub-menu>
         </el-menu>
         </el-aside>
</template>
<script setup>
 let props= defineProps({
    info:{
      type:Object,
      default:{}
    }
  })
</script>
<style lang="scss" scoped>
.info{
  margin-top:50px;
  margin-bottom: 20px;
}
.info p{
  text-align: center;
  color: #fff;
  font-size: 12px;
}
   .avatar-box {
    display: block;
      margin: 0 auto;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      border: 1px solid #409eff;
      box-shadow: 0 0 10px #409eff;
      position: relative;
      bottom: 20px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
</style>